<script setup lang="ts">
import usePx2rempx from '@/hook/px2rempx'
import { toPercent, toPercentHtml, toThousand } from '@/utils/filter'
import px2rem from '@/utils/flexble'
import { computed } from 'vue'
import { client } from '@/utils/http'
import { useQuery } from '@tanstack/vue-query'
import useFilterStore from '@/stores/filter'
import { storeToRefs } from 'pinia'
import { isNaN } from 'lodash-es'

const filterStore = useFilterStore()

const { ymdId, checkDataUpdateNum } = storeToRefs(filterStore)

const { data, isFetching } = useQuery<{
  toShopYoy: string
  saleYy: number
  clueValidRate: string
  salesYoy: string
  orderYoy: string
  toShop: number
  testRateYoy: string
  clueQty: number
  saleSpeedColor: string
  sales: number
  saleSpeed: string
  saleYySpeed: string
  orderSpeedColor: string
  orderSpeed: string
  saleYyYoy: string
  testRate: string
  stockMonth: string
  newOrder: number
  stock: number
}>({
  keepPreviousData: true,
  queryKey: ['/saleCoreBoard/getSalesPerformance', ymdId, checkDataUpdateNum],
  queryFn: () => client('/saleCoreBoard/getSalesPerformance', { ymdId: ymdId.value }),
  enabled: computed(() => !!ymdId.value)
})

const datas = computed(() => {
  if (!data.value) {
    return []
  }
  const {
    toShopYoy,
    saleYy,
    clueValidRate,
    salesYoy,
    orderYoy,
    toShop,
    testRateYoy,
    clueQty,
    saleSpeedColor,
    sales,
    saleSpeed,
    // saleYySpeed,
    orderSpeedColor,
    orderSpeed,
    saleYyYoy,
    testRate,
    stockMonth,
    newOrder,
    stock
  } = data.value
  return [
    {
      title: '销售',
      value: toThousand(sales),
      values: [
        {
          label: '同比',
          value: toPercentHtml({ num: salesYoy, decimal: 1, preffix: true, multiple: 1 }),
          color: undefined
        },
        {
          label: '销售进度',
          value: toPercent(saleSpeed, 1, false, '%', 1),
          color: saleSpeedColor
        }
      ]
    },
    {
      title: '新增订单',
      value: toThousand(newOrder),
      values: [
        {
          label: '同比',
          value: toPercentHtml({ num: orderYoy, decimal: 1, preffix: true, multiple: 1 }),
          color: undefined
        },
        {
          label: '新增订单进度',
          value: toPercent(orderSpeed, 1, false, '%', 1),
          color: orderSpeedColor
        }
      ]
    },
    {
      title: '试乘试驾率',
      value: toPercent(testRate, 1, false, '%', 1),
      values: [
        {
          label: '同比',
          value: toPercentHtml({ num: testRateYoy, decimal: 1, preffix: true, multiple: 1 }),
          color: undefined
        }
      ]
    },
    {
      title: '到店组数',
      value: toThousand(toShop),
      values: [
        {
          label: '同比',
          value: toPercentHtml({ num: toShopYoy, decimal: 1, preffix: true, multiple: 1 }),
          color: undefined
        }
      ]
    },
    {
      title: '线上线索',
      value: toThousand(clueQty),
      values: [
        {
          label: '有效线索占',
          value: toPercentHtml({ num: clueValidRate, decimal: 1, preffix: false, multiple: 1 }),
          color: undefined
        }
      ]
    },
    {
      title: '店头库存',
      value: toThousand(stock),
      values: [
        {
          label: '库存月数',
          value: toThousand(stockMonth),
          color: 'green'
        }
      ]
    },
    {
      showProgress: true,
      title: '年累销量',
      value: toThousand(saleYy),
      values: [
        {
          label: '同比',
          value: toPercentHtml({ num: saleYyYoy, decimal: 1, preffix: false, multiple: 1 }),
          color: undefined
        }
      ]
    }
  ]
})

const { remPx } = usePx2rempx<number[]>([6, 2, 1, 12, 2])

const chartOption = computed(() => {
  const [progressWidth, splitLineLenght, splitLineWidth, axisLabelSize, splitLineDistance] =
    remPx.value

  return {
    series: [
      {
        type: 'gauge',
        radius: '100%',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '80%'],
        progress: {
          show: true,
          width: progressWidth,
          roundCap: true,
          color: {
            type: 'linear',
            x: 22,
            y: 33,
            x2: 22,
            y2: -4.5,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(167, 178, 242, 0.97)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(167, 178, 242, 0.97)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: progressWidth,
            color: [[1, '#14247C']]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          distance: splitLineDistance,
          length: splitLineLenght,
          lineStyle: {
            width: splitLineWidth,
            color: '#999'
          }
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          show: true,
          color: '#fff',
          valueAnimation: true,
          fontSize: axisLabelSize,
          offsetCenter: [0, 0],
          formatter: (value: string) => {
            return `${isNaN(value) ? '-' : value}%`
          }
        },
        data: [
          {
            value: data.value?.saleYySpeed
          }
        ]
      }
    ]
  }
})
</script>

<template>
  <a-spin :spinning="isFetching">
    <div class="overview">
      <a-row>
        <a-col class="item" :flex="1" v-for="item in datas" :key="item.title">
          <div class="title">
            <SvgIcon name="overview-title" :size="20" />
            <div>{{ item.title }}</div>
          </div>
          <div class="num">{{ item.value }}</div>
          <div class="values">
            <template v-for="(value, index) in item.values" :key="value.label">
              <div class="values">
                <div class="label">{{ value.label }}</div>
                <div v-if="index === 0" class="value" :class="[value.color]" v-html="value.value" />
                <div v-else class="value" :class="[value.color]">{{ value.value }}</div>
              </div>
            </template>
          </div>
          <div v-if="item.showProgress" class="progress">
            <Chart :style="{ height: px2rem(60) }" :option="chartOption" />
            <div class="progress-title">年计进度</div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>
<style lang="less" scoped>
.overview {
  border-radius: 8px;
  border: 1px solid #4c76ec;
  background: linear-gradient(180deg, rgba(0, 31, 109, 0.86) 0%, rgba(10, 30, 84, 0.86) 100%);
  height: 128px;
  padding: 16px;
  .item {
    position: relative;
    .progress {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 70px;

      .progress-title {
        color: #799bc0;
        text-align: center;
        font-family: Alibaba PuHuiTi 2;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px; /* 85.714% */
      }
    }
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      div {
        margin-left: 8px;
        color: #fff;
        font-family: Alibaba PuHuiTi 2;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 100% */
        letter-spacing: -0.32px;
        opacity: 0.8;
      }
    }
    .num {
      margin-bottom: 4px;
      color: #fff;
      font-family: DIN Alternate;
      font-size: 34px;
      font-style: normal;
      font-weight: 700;
      line-height: 42px; /* 123.529% */
    }
    .values {
      display: flex;
      align-items: center;
      &:nth-child(2) {
        margin-left: 12px;
      }
      .label {
        margin-right: 4px;
        color: #799bc0;
        font-family: Alibaba PuHuiTi 2;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 114.286% */
      }
      .value {
        color: #fff;
        font-family: Alibaba PuHuiTi 2;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 114.286% */
        &.red {
          color: #ff5656;
        }
        &.green {
          color: #35c08e;
        }
      }
    }
  }
}
</style>
